import 'package:fish_redux/fish_redux.dart';
import 'package:flutter/material.dart';
import 'package:zenge_web_flutter/custom/appBar_widget.dart';
import 'package:zenge_web_flutter/custom/custom_products_view.dart';
import 'package:zenge_web_flutter/custom/custom_title.dart';
import 'package:zenge_web_flutter/custom/custom_widget.dart';
import 'package:zenge_web_flutter/date_base/illumination_products_date.dart';
import 'package:zenge_web_flutter/view/keep_alive.dart';

import 'state.dart';

Widget buildView(IlluminationProductsState state, Dispatch dispatch,
    ViewService viewService) {
  double screenWidth = 1920;
  double screenHeight = (650 / 1920) * 1920;
  return Scaffold(
    body: Container(
      width: MediaQuery.of(viewService.context).size.width,
      alignment: Alignment.center,
      child: Container(
        width: screenWidth,
        alignment: Alignment.center,
        child: ListView(
          shrinkWrap: true,
          controller: state.scrollController,
          children: [
            Stack(
              children: [
                Positioned(
                  top: 65,
                  child: Container(
                    width: screenWidth,
                    height: 250 / 1920 * screenWidth,
                    child: new Image.network(
                      'http://nwzimg.wezhan.hk/contents/sitefiles3603/18018508/images/2237378.jpg',
                      fit: BoxFit.fill,
                    ),
                  ),
                ),
                Positioned(
                    top: 260,
                    left: (screenWidth - screenWidth / 20) / 2,
                    child: Container(
                      height: 5,
                      width: screenWidth / 20,
                      color: Colors.blue,
                    )),
                AppBarWidget(
                  boxHeight: 380,
                ),
              ],
            ),
            Container(
              width: screenWidth * 7 / 10,
              height: 1550,
              child: Stack(
                children: [
                  Positioned(
                    top: 0,
                    left: (screenWidth - screenWidth * 7 / 10) / 2,
                    child: Container(
                      width: screenWidth * 7 / 10,
                      child: GridView.builder(
                          shrinkWrap: true,
                          itemCount: bulbList.length,
                          padding: EdgeInsets.all(10),
                          gridDelegate:
                              SliverGridDelegateWithFixedCrossAxisCount(
                            crossAxisCount: 3,
                            crossAxisSpacing: 10,
                            mainAxisSpacing: 10,
                            childAspectRatio: 308 / 358,
                          ),
                          itemBuilder: (BuildContext context, int index) {
                            return Container(
                              margin: EdgeInsets.all(20),
                              child: ProductsView(
                                width: screenHeight / 5,
                                text: bulbList[index].text01,
                                image01: bulbList[index].image1,
                                image02: bulbList[index].image2,
                              ),
                            );
                          }),
                    ),
                  ),
                ],
              ),
            ),
            SizedBox(
              height: screenWidth / 30,
            ),
            CustomTitle(
              text: '户外照明',
              width: screenWidth,
              textSize: 28,
            ),
            Container(
              width: screenWidth * 7 / 10,
              height: 550,
              child: Stack(
                children: [
                  Positioned(
                    top: 0,
                    left: (screenWidth - screenWidth * 7 / 10) / 2,
                    child: Container(
                      width: screenWidth * 7 / 10,
                      child: GridView.builder(
                          shrinkWrap: true,
                          itemCount: outdoorLightingList1.length,
                          padding: EdgeInsets.all(10),
                          gridDelegate:
                              SliverGridDelegateWithFixedCrossAxisCount(
                            crossAxisCount: 3,
                            crossAxisSpacing: 10,
                            mainAxisSpacing: 10,
                            childAspectRatio: 308 / 358,
                          ),
                          itemBuilder: (BuildContext context, int index) {
                            return Container(
                              margin: EdgeInsets.all(20),
                              child: ProductsView(
                                width: screenHeight / 5,
                                text: outdoorLightingList1[index].text01,
                                image01: outdoorLightingList1[index].image1,
                                image02: outdoorLightingList1[index].image2,
                              ),
                            );
                          }),
                    ),
                  ),
                ],
              ),
            ),
            SizedBox(
              height: screenWidth / 30,
            ),
            Container(
              height: 200,
              width: screenWidth,
              child: Stack(
                children: [
                  Positioned(
                      left: (screenWidth - 300) / 2,
                      top: 70,
                      child: Container(
                          width: 300,
                          alignment: Alignment.center,
                          child: SelectableText('智能照明产品',
                              style: TextStyle(
                                fontSize: 28,
                                color: Colors.black,
                                fontWeight: FontWeight.bold,
                              )))),
                  Positioned(
                      left: (screenWidth - 300) / 2,
                      top: 120,
                      child: Container(
                          width: 300,
                          alignment: Alignment.center,
                          child: SelectableText('BT-Mesh系列',
                              style: TextStyle(
                                fontSize: 28,
                                color: Colors.black,
                              )))),
                  Positioned(
                    left: (screenWidth - screenWidth / 20) / 2,
                    top: 170,
                    child: Container(
                      height: 5,
                      alignment: Alignment.center,
                      width: screenWidth / 20,
                      color: Colors.blue,
                    ),
                  ),
                ],
              ),
            ),
            Container(
              width: screenWidth * 7 / 10,
              height: 2100,
              child: Stack(
                children: [
                  Positioned(
                    top: 0,
                    left: (screenWidth - screenWidth * 7 / 10) / 2,
                    child: Container(
                      width: screenWidth * 7 / 10,
                      child: GridView.builder(
                          shrinkWrap: true,
                          itemCount: btMeshList.length,
                          padding: EdgeInsets.all(10),
                          gridDelegate:
                              SliverGridDelegateWithFixedCrossAxisCount(
                            crossAxisCount: 3,
                            crossAxisSpacing: 10,
                            mainAxisSpacing: 10,
                            childAspectRatio: 308 / 358,
                          ),
                          itemBuilder: (BuildContext context, int index) {
                            return Container(
                              margin: EdgeInsets.all(20),
                              child: ProductsView(
                                width: screenHeight / 5,
                                text: btMeshList[index].text01,
                                image01: btMeshList[index].image1,
                                image02: btMeshList[index].image2,
                              ),
                            );
                          }),
                    ),
                  ),
                ],
              ),
            ),
            SizedBox(
              height: screenWidth / 30,
            ),
            CustomTitle(
              text: '户外照明',
              width: screenWidth,
              textSize: 28,
            ),
            Container(
              width: screenWidth * 7 / 10,
              height: 550,
              child: Stack(
                children: [
                  Positioned(
                    top: 0,
                    left: (screenWidth - screenWidth * 7 / 10) / 2,
                    child: Container(
                      width: screenWidth * 7 / 10,
                      child: GridView.builder(
                          shrinkWrap: true,
                          itemCount: outdoorLightingList2.length,
                          padding: EdgeInsets.all(10),
                          gridDelegate:
                              SliverGridDelegateWithFixedCrossAxisCount(
                            crossAxisCount: 3,
                            crossAxisSpacing: 10,
                            mainAxisSpacing: 10,
                            childAspectRatio: 308 / 358,
                          ),
                          itemBuilder: (BuildContext context, int index) {
                            return Container(
                              margin: EdgeInsets.all(20),
                              child: ProductsView(
                                width: screenHeight / 5,
                                text: outdoorLightingList2[index].text01,
                                image01: outdoorLightingList2[index].image1,
                                image02: outdoorLightingList2[index].image2,
                              ),
                            );
                          }),
                    ),
                  ),
                ],
              ),
            ),
            SizedBox(
              height: screenWidth / 30,
            ),
            Stack(
              children: [
                ImageWidget(
                  width: screenWidth,
                  height: 310 / 1920 * screenWidth,
                  imageUrl:
                      'http://nwzimg.wezhan.hk/contents/sitefiles3603/18018508/images/2038112.jpg',
                ),
                Positioned(
                  top: 20,
                  left: 0,
                  child: Container(
                    width: screenWidth,
                    color: Colors.white,
                    alignment: Alignment.center,
                    child: Text(
                      '支持以下智能化功能',
                      style: TextStyle(fontSize: 40, color: Colors.black),
                    ),
                  ),
                ),
              ],
            ),
            Stack(
              alignment: Alignment.center,
              children: [
                ImageWidget(
                  width: screenWidth,
                  height: 310 / 1920 * screenWidth,
                  imageUrl:
                      'http://nwzimg.wezhan.hk/contents/sitefiles3603/18018508/images/2038209.jpg',
                ),
                Positioned(
                  top: 20,
                  left: 0,
                  child: Container(
                    width: screenWidth,
                    color: Colors.white,
                    alignment: Alignment.center,
                    child: Text(
                      '第三方平台兼容',
                      style: TextStyle(fontSize: 40, color: Colors.black),
                    ),
                  ),
                ),
              ],
            ),
            Container(
              height: 60,
              color: Colors.white,
            ),
            KeepAliveWidget(viewService.buildComponent("bottom_info")),
          ],
        ),
      ),
    ),
      floatingActionButton: FloatingActionButton(
        backgroundColor: Colors.white,
        onPressed: () {
          // scrollController 通过 animateTo 方法滚动到某个具体高度
          // duration 表示动画的时长，curve 表示动画的运行方式，flutter 在 Curves 提供了许多方式
          state.scrollController.animateTo(0.0,
              duration: Duration(milliseconds: 500),
              curve: Curves.decelerate);
        },
        child: Icon(Icons.arrow_upward_sharp,color: Colors.grey,size: 40,),
      )
  );
}
